<template>
	<view class="maintenance-statistics-card">
		<view class="card">
			<view class="maintenanceheader">
				<view class="title">{{ title }}</view>
				<view class="filterBox">
					<view :class="['typeItem', filter.type == 1 ? 'act' : '']" @click="changeType(1)">数量</view>
					<view :class="['typeItem', filter.type == 2 ? 'act actRight' : '']" @click="changeType(2)">趋势</view>
				</view>
			</view>
			<view class="maintenanceheader">
				<view class="titleTab">
					<view :class="[tabNums === 0 ? 'tabAct acts' : 'tabAct', 'tabItem']" @click="yearClick(0)">年审梯</view>
					<view :class="[tabNums === 1 ? 'tabAct2 acts' : 'tabAct2', 'tabItem']" @click="yearClick(1)">非年审梯</view>
					<view :class="[tabNums === 2 ? 'tabAct3 acts' : 'tabAct3', 'tabItem']" @click="yearClick(2)">全部</view>
				</view>
				<view class="titleTab" @click="clickDateBtn">
					<view class="tabItem">
						{{ filter.dateType !== 4 ? ['', '今天', '近7天', '近30天'][`${filter.dateType}`] : `${showDate}` }}
						<uni-icons type="forward" style="margin-bottom: -3rpx" color="#666"></uni-icons>
					</view>
				</view>
			</view>
			<slot name='one' :value1='child1'> 这就是默认值1</slot>  
		</view>
		<!-- 这里是日期弹出框 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="dateBox">
				<view class="line"><view></view></view>

				<view class="dateContent">
					<view class="date_title">选择日期</view>
					<view class="date_content-box">
						<view
							v-for="(item, index) in dateList"
							:key="index"
							:class="['date_item', popupDate == item.type && !customDate ? 'actDate' : '']"
							@click="chooseDate(item)"
						>
							{{ item.name }}
						</view>
					</view>
					<view class="date_content-box">
						<view :class="['date_item', 'custom_date_item', customDate ? 'actDate' : '']" @click="chooseDate({ name: '自定义', type: 4 })">
							{{ customDate ? customDate.slice(0, 10) : '开始时间' }}
						</view>
						<view class="date_line">-</view>
						<view :class="['date_item', 'custom_date_item', customDate ? 'actDate' : '']" @click="chooseDate({ name: '自定义', type: 4 })">
							{{ customDate ? (customDate.length > 20 ? customDate.slice(11, 21) : customDate) : '结束时间' }}
						</view>
					</view>
				</view>
				<view class="date_bottom">
					<view class="date_bottom_left">
						<label class="radio" @click="changeApply">
							<radio color="#0091ff " style="transform:scale(0.7)" :checked="applyToAll ? true : false" />
							<span :style="{ color: applyToAll ? '#0091ff' : '#666' }">应用到所有图表</span>
						</label>
					</view>
					<view class="date_bottom_right" @click="comfireChooseDate"><view>确定</view></view>
				</view>
			</view>
		</uni-popup>
		<time-select :beforeToday="true" :atterToday="true" v-if="selectTimePopup" @close="closeSelectTimePopup"></time-select>
		
	</view>
</template>

<script>
import unipopup from '@/components/uni-popup/uni-popup.vue';
import { getLastDates } from '@/utils/tools.js';
import timeSelect from '../timeSelect.vue';
import { getNowTime } from '@/utils/utils.js';
export default {
	components: {
		unipopup,
		timeSelect
	},
	props: {
		title: {
			type: String
		},
		name: {
			type: String
		},
		opt: {}
	},
	data() {
		return {
			filter: {
				type: 1, // 统计类型 1数量，2趋势
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: ''
			},
			tabNums: 0,
			customDate: '',
			showDate: '', // 时间按钮展示
			dateList: [{ name: '今天', type: 1 }, { name: '近7天', type: 2 }, { name: '近30天', type: 3 }],
			applyToAll: false, // 应用于全部按钮
			popupDate: '', // 弹出层日历的展示
			selectTimePopup: false,
			child1:'数据1',
		};
	},
	created() {
		this.filterFuc('dateType', 2);
	},
	methods: {
		// 选择数量和趋势
		changeType(res) {
			this.filter.type = res;
			this.filterFuc('type', res);
		},
		// 选择年审梯非年审梯
		yearClick(res) {
			this.tabNums = res;
			this.$emit('filterFun', { ...this.filter, useType: this.tabNums, applyToAll: this.applyToAll, name: this.name });
		},
		// 点击日期按钮
		clickDateBtn() {
			console.log(this.filter, 'dianjitanchuang');
			this.$refs.popup.open();
			// 如果不是自定义日期
			if (this.filter.dateType !== 4) {
				this.popupDate = this.filter.dateType;
			}
			this.applyToAll = false;
		},
		changeApply(res) {
			this.applyToAll = !this.applyToAll;
		},
		// 选择日期
		chooseDate(item) {
			console.log(item, '选择日期');
			if (item.type !== 4) {
				this.popupDate = item.type;
				this.customDate = '';
			} else {
				this.filterFuc('dateType', 4);
			}
		},
		// 时间组件确认
		comfireChooseDate() {
			console.log(this.filter, 9999);
			console.log(this.popupDate, 'dateType');
			if (this.popupDate !== 4) {
				this.filterFuc('dateType', this.popupDate);
			} else {
				this.filter.dateType = 4;
				this.showDate = this.customDate;
				this.$emit('filterFun', { ...this.filter, useType: this.tabNums, applyToAll: this.applyToAll, name: this.name });
			}

			this.$refs.popup.close();
		},
		filterFuc(key, val) {
			if (key != 'dateType' || val != 4) {
				this.filter[key] = val;
			}

			if (key == 'dateType') {
				if (val == 1) {
					// 今天
					const dates = getLastDates(0);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 2) {
					// 近七天
					const dates = getLastDates(7);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 3) {
					// 近30天
					const dates = getLastDates(30);
					this.filter.startTime = dates.startTime;
					this.filter.endTime = dates.endTime;
				}
				if (val == 4) {
					this.selectTimePopup = true;
					return;
				}
			}

			this.$emit('filterFun', { ...this.filter, useType: this.tabNums, applyToAll: this.applyToAll, name: this.name });
		},
		// 自定义日期展示
		chooseCustomer() {
			this.selectTimePopup = true;
			this.filter.dateType = 4;
		},
		// 自定义日期确定按钮
		closeSelectTimePopup(res) {
			if (res) {
				console.log('自定义日期', res);
				this.customDate = res;
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime >= nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}

				this.filter.startTime = start;
				this.filter.endTime = end;
				this.popupDate = 4;
			} else {
			}
			this.selectTimePopup = false;
			// this.initData();
			// this.$emit('filterFun',{...this.filter,useType:this.tabNums,applyToAll:this.applyToAll,name:this.name})
		}
	}
};
</script>

<style lang="scss" scoped>
.maintenance-statistics-card {
	.card {
		background-color: #fff;
		width: calc(100% - 80rpx);
		padding: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 8rpx;
		.maintenanceheader {
			display: flex;
			justify-content: space-between;
		}
		.title {
			font-size: 32rpx;
			border-left: 4rpx solid #ffffff;
			line-height: 32rpx;
			padding-left: 16rpx;
			color: #333333;
			font-weight: bold;
			margin-left: -19rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}
		.filterBox {
			display: flex;
			font-size: 24rpx;
			color: #666;
			.typeItem {
				width: 112rpx;
				height: 56rpx;
				border: 2rpx solid #d5d5d5;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.typeItem:nth-child(1) {
				border-radius: 28rpx 0rpx 0rpx 28rpx;
			}
			.typeItem:nth-child(2) {
				border-radius: 0rpx 28rpx 28rpx 0rpx;
				border-left: none;
			}
			.act {
				background: #dcf0ff;
				border-color: #0091ff;
				color: #0091ff;
			}
			.actRight {
				border-left: 2rpx solid !important;
			}
		}
		.titleTab {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			padding: 16rpx 0;
			.tabItem {
				padding: 0 16rpx;
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #d5d5d5;
				border-radius: 4rpx;
			}
			.tabAct {
				border-radius: 4rpx 0rpx 0rpx 4rpx;
			}
			.tabAct2 {
				border-right: none;
				border-left: none;
			}
			.tabAct3 {
				border-radius: 0rpx 4rpx 4rpx 0rpx;
			}
			.acts {
				border: 2rpx #0091ff solid;
				color: #0091ff;
			}
			.acts2 {
				color: #0091ff;
				border: 2rpx #0091ff solid;
				border-right: none;
				border-left: none;
			}
		}
	}
	.dateBox {
		.line {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 18rpx;
			padding-bottom: 20rpx;
			view {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
			}
		}
		height: 522rpx;
		background-color: #fff;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
		.dateContent {
			padding-left: 40rpx;
			padding-right: 22rpx;
		}
		.date_title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 68rpx;
		}
		.date_content-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 52rpx;
			.date_line {
				width: 68rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.date_item {
				// width: 216rpx;
				height: 48rpx;
				border: 2rpx solid #cccccc;
				border-radius: 8rpx;
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				color: #666;
			}
			.date_item:nth-child(2) {
				margin: 0 20rpx;
			}
			.custom_date_item {
				color: #cccc;
			}
			.date_bottom {
				height: 108rpx;
			}
			.actDate {
				color: #0091ff;
				border-color: #0091ff;
			}
		}

		.date_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 10rpx;
			.date_bottom_left {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
			}
			.date_bottom_right {
				display: flex;
				width: 478rpx;
				justify-content: center;
				view {
					width: 412rpx;
					height: 70rpx;
					background: #0091ff;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}
	}
}
</style>
